
import {defineComponent, ref, reactive, toRefs, watch, h, inject, provide, onBeforeMount} from 'vue'
import { BulbTwotone, BulbFilled, BlockOutlined,CloseOutlined, ExperimentOutlined, CodeOutlined, DownOutlined } from '@vicons/antd'
import {darkTheme, useMessage, MenuOption, NIcon } from 'naive-ui'
import hljs from 'highlight.js/lib/core'
import java from 'highlight.js/lib/languages/java'
hljs.registerLanguage('java', java)
import * as Data from './MenuData'
import { useStore } from "vuex"


export default defineComponent({
    components: {
        BulbTwotone, BulbFilled, BlockOutlined, CloseOutlined,ExperimentOutlined, CodeOutlined, DownOutlined
    },
    setup() {
        const message = useMessage()
        const store = useStore()
        const state = reactive({
            dark: false,
            hljs,
            active: false,
            loadingHitokoto: true,
            experiment: false, //实验
            menuOptions: ref<MenuOption | any>(null),
        })
        const expansionNavbar = <Function>inject("expansionNavbar")
        const methods = {
            loadHitokoto() {
                state.loadingHitokoto = true
                fetch('https://v1.hitokoto.cn')
                    .then(response => response.json())
                    .then(data => {
                        let hitokoto:any | null = document.getElementById('hitokoto_text')
                        if (hitokoto) {
                            hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                            hitokoto.innerText = '「' + data.hitokoto + '」'
                            state.loadingHitokoto = false
                        }
                    })
                    .catch(err => {
                    })
            },
            createMessage(){
                message.warning("右键壁纸以设置背景！！！", {
                    icon: () => h(NIcon, null, { default: () => h(CodeOutlined) })
                })
            },
        }
        onBeforeMount(()=>{
            state.menuOptions = Data.menuList
        })
        watch(
            () => [state.dark, state.active],
            ([dark, active], [oldDark, oldActive]) => {
                if (dark)
                    store.commit('changeTheme', darkTheme)
                 else
                    store.commit('changeTheme', null)
                if (active)
                    methods.loadHitokoto()
            }
        )
        return {
            ...toRefs(state),
            ...methods,
            expansionNavbar,
            store
        }
    }
})
